<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

		<title>📜 Scrollable Page Example - Sequential Workflow Designer</title>
		<meta property="og:title" content="📜 Scrollable Page Example - Sequential Workflow Designer" />
		<meta name="description" content="This example shows how you can attach Sequential Workflow Designer to a scrollable page." />
		<meta
			property="og:description"
			content="This example shows how you can attach Sequential Workflow Designer to a scrollable page."
		/>
		<meta property="og:image" content="https://nocode-js.com/img/social-card.png" />
		<meta name="twitter:card" content="summary_large_image" />
		<meta name="twitter:image" content="https://nocode-js.com/img/social-card.png" />

		<link rel="icon" href="./assets/favicon.ico" />
		<link rel="stylesheet" href="./assets/common.css" />
		<style>
			main {
				max-width: 800px;
				margin: 0 auto;
			}

			.inline-designer {
				width: 100%;
				height: 80vh;
			}
			.sqd-editor {
				padding: 10px;
			}
			.sqd-editor label {
				display: block;
				padding: 10px 0;
			}
		</style>
	</head>
	<body>
		<header class="title-bar">
			<div class="column flex-1">
				<h1>📜 Scrollable Page Example</h1>
			</div>
			<div class="column text-end flex-1 text-gray">
				<a href="https://github.com/nocode-js/sequential-workflow-designer" target="_blank">GitHub</a> |
				<a href="https://nocode-js.com" target="_blank">NoCode JS</a>
			</div>
		</header>

		<main>
			<h2>This is a simple scrollable page</h2>

			<p>
				Here you can check how Sequential Workflow Designer works on a scrollable page. Additionally this example has disabled
				keyboard shortcuts.
			</p>

			<div class="inline-designer"></div>

			<h2>This is a simple scrollable page</h2>

			<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dignissim ex augue, nec ultrices tellus feugiat vitae. Donec at
				commodo elit. Vestibulum imperdiet eget elit a feugiat. Fusce eros diam, laoreet id neque eu, molestie facilisis est. Sed
				tristique sollicitudin ultrices. Ut a nibh a erat euismod venenatis sit amet quis felis.
			</p>

			<div class="inline-designer"></div>

			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
		</main>

		<script src="./assets/lib.js"></script>
		<script src="./assets/scrollable-page.js"></script>
	</body>
</html>
